<script setup name="AsideMenu">
const props = defineProps({
    route: {
        type: Array,
        default: []
    },
})
</script>

<template>
    <template v-for="(item,ind) in route" :key="ind">
        <el-sub-menu style="user-select: none" :index="item.path" v-if="item.children && item.children.length > 0">
            <template #title>
                <el-icon>
                    <svg-icon v-if="item.icon.startsWith('custom')" :iconName="item.icon" class="icon-class"></svg-icon>
                    <component  v-else :is="item.icon"></component>
                </el-icon>
                <span>{{$t(item.meta.ln)}}</span>
            </template>
            <AsideMenu :route="item.children"></AsideMenu>
        </el-sub-menu>
        <el-menu-item :index="item.path" v-else-if="item.meta.menu">
            <el-icon >
                <svg-icon v-if="item.icon.startsWith('custom')" :iconName="item.icon" class="icon-class"></svg-icon>
                <component  v-else :is="item.icon"></component>
            </el-icon>
            <template #title>{{$t(item.meta.ln)}}</template>
        </el-menu-item>
    </template>
</template>

<style scoped>

</style>
